<template>
	<view>
		<view class="container">
			<uni-nav-bar left-icon="back" left-text="返回" title="我购买的" @clickLeft="goBack" color="white"
				backgroundColor="rgb(55, 138, 241)"></uni-nav-bar>
			<index-tabbar :tabBars="tabBars" @TarTap="TarData" :tabIndex="tabIndex"></index-tabbar>
			<!-- 每个tab标题对应的具体组件内容 -->
			<component v-bind:is="currentTabComponent"></component>
		</view>
	</view>
</template>

<script>
	import indexTabbar from './topBar.vue';
	//全部选项卡  具体内容
	import all from './topBarComponent/all.vue';
	//待付款选项卡 具体内容
	import payment_onBehalf from './topBarComponent/payment_onBehalf.vue';
	//待评价选项卡 具体内容
	import toBeReviewed from './topBarComponent/toBeReviewed.vue';
	export default {
		components: {
			indexTabbar,
			all,
			payment_onBehalf,
			toBeReviewed
		},
		data() {
			return {
				tabIndex: 'all',
				tabBars: [{
						name: "全部",
						id: 'all'
					},
					{
						name: "待付款",
						id: 'payment_onBehalf'
					},
					{
						name: "待评价",
						id: 'toBeReviewed'
					}
				],
				currentTabComponent: "all"
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			//点击导航栏标签改变当前索引
			TarData(item) {
				//设置id，来显示选中那个标签，显示下划线
				this.tabIndex = item.id;
				//显示标签对应的组件内容
				this.currentTabComponent = item.id
			}

		},
	}
</script>

<style>

</style>
